<div class="navbar navbar-fixed-top main-nav" role="navigation">
    <div class="container">
        <div class="navbar-header">
            <button #button class="navbar-toggle" type="button" data-toggle="collapse" data-target=".navbar-responsive-collapse" (click)="toggle(button)">
                <span class="sr-only">Toggle Navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a href="#home.html" class="navbar-brand">
                Angular2-Bootstrap
            </a>
        </div>
        <div class="collapse navbar-collapse navbar-responsive-collapse" aria-expanded="false">
            <ul class="nav navbar-nav navbar-right">
                <li class="dropdown active">
                    <a routerLink="home">Home</a>
                </li>
                <li class="dropdown">
                    <a routerLink="user" data-toggle="dropdown" class="dropdown-toggle">User</a>
                </li>
                <li class="dropdown">
                    <a routerLink="role" data-toggle="dropdown" class="dropdown-toggle">Role
                    </a>
                </li>
                <li class="dropdown">
                    <a routerLink="permission" data-toggle="dropdown" class="dropdown-toggle">Permission</a>
                </li>
                <li class="dropdown hidden-sm">
                    <a routerLink="settings">Settings</a>
                </li>
                <li class="dropdown hidden-sm">
                    <a routerLink="echarts">ECharts</a>
                </li>
                <li class="dropdown hidden-sm">
                    <a href="https://my.oschina.net/mumu/blog" data-toggle="dropdown" class="dropdown-toggle" target="_blank">AboutMe</a>
                </li>
            </ul>
        </div>
    </div>
</div>
<div class="main-container">
    <router-outlet></router-outlet>
</div>
